<template>
    <div class="container">
        <Header :left="true" title="提现明细"></Header>

        <div class="search-box">
            <div @click="changeType('all')" :class="'status-item' + (search.transferType === 'all' ? ' status-act' :'')">全部</div>
            <div v-if="isLevel1()" @click="changeType('3')" :class="'status-item' + (search.transferType === '3' ? ' status-act' :'')">推荐提成</div>
            <div v-if="isLevel2()" @click="changeType('1')" :class="'status-item' + (search.transferType === '1' ? ' status-act' :'')">佣金提现</div>
        </div>



        <div class="list-box" v-loading="search.loading">

            <div class="empty" v-if="search.list.length === 0" >暂无数据</div>

            <div class="list-item" @click="toDetail(index)" v-for="(item,index) in search.list" :key="index">
                <div class="order-title">{{item.transferTypeDesc}}</div>
                <div class="list-desc" style="margin-top:10px;" >{{item.trueName}} {{item.alipayAccount}}</div>
                <div class="list-desc">{{fDate(null,null,item.createDate)}}</div>
                <div class="list-right">
                    <div>{{fMoney(null,null,item.amount)}}</div>
                    <div style="font-size:12px;margin-top:10px;">{{item.statusDesc}}</div>
                </div>
            </div>

            <div v-if="search.list.length > 0" class="next-btn">
                <div>共{{search.page}}/{{search.totalPage}}页，{{search.totalRow}}条</div>
                <div style="margin-top:10px;" >
                    <span @click="jumpPage(search.page - 1)" >上一页</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <span @click="jumpPage(search.page + 1)">下一页</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '../../common/Header.vue';
export default {
    components:{Header},
    data:function(){
        return {
            search:{
                keyword:'',transferType:'all',loading:false,page:1,pageSize:20,totalRow:0,totalPage:0,list:[]
            }
        };
    },
    created:function(){
        this.search.transferType = this.$route.params.type;
        this.loadData();
    },
    methods:{
        searchByKeyupdate(e){
            this.search.page = 1;
            this.search.totalPage = 0 ;
            this.search.totalRow = 0;
            this.jumpPage(1);
        },
        jumpPage(page){
            if(this.search.loading || page <= 0 || (this.search.totalPage !== 0 && page > this.search.totalPage)){
                return;
            }
            this.search.page = page;
            this.loadData();
        },
        changeType(type){
            if(this.search.loading){return;}
            this.search.transferType = type;
            this.searchByKeyupdate();
        },
        loadData(){
            var that = this;
            var body = {
                keyword:that.search.keyword,
                pageNo:that.search.page,
                pageSize:that.search.pageSize,
                transferType:that.search.transferType === 'all' ? '' : that.search.transferType
            }
            that.search.loading = true;
            that.$api.post('/channel/channelWithdrawDeposit/list.json',body).then(data =>{
                that.search.loading = false;
                if(data.data.code != '0'){
                    that.$message.error(data.data.msg);
                    return;
                }
                that.search.list = data.data.data.list;
                that.search.totalPage = data.data.data.totalPage;
                that.search.totalRow = data.data.data.totalRow;
            }).catch(()=>{
                that.search.loading = false;
            });
        },
        toDetail(index){
            var row = this.search.list[index];
            localStorage.setItem('widthdrawdetail',JSON.stringify(row));
            this.toPage('/center/withdrawdetail');
        }
        
    }
}
</script>
<style scoped>
    .container{
        width: 100%;min-height: 100%;
        background: #F2F6FC;
        padding: 20px;
        color:#303133;
    }
    .empty{width: 100%;text-align: center;padding: 40px 0;font-size: 12px;color: #909399;}

    .search-box{
        background: #fff;
        border-radius: 10px;
    }

    .next-btn{text-align:center;margin-top: 20px;color: #409EFF;}
    .list-item{
        width: 100%;padding: 10px;background: #fff;
        border-radius: 5px;
        margin-top: 10px;
        position: relative;
    }
    .list-item .list-desc{
        width: 100%;
        padding: 5px 0;
        color: #606266;
        font-size: 12px;
    }
    .list-item .list-right{
        position: absolute;
        top:0;bottom:0;
        margin: auto;
        right: 10px;
        width: 100px;
        height: 50px;
        text-align: right;
    }
    .status-item{
        padding: 10px;
        font-size: 12px;
        display: inline-block;
    }
    .status-act{
        color: #409EFF;
    }
</style>
